<template>
    <div class="container-progress">
        <div class="exam-count">
            <span class="count-current">{{ current }}</span>
            <span class="split">/</span>
            <span class="count-total">{{ total }}</span>
        </div>
        <div class="progress-box">
            <van-progress :show-pivot="false" :percentage="percentage" />
        </div>
        <div class="question">
            ?
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps<{
    total: number | string,
    current: number | string
}>()
const percentage = computed(() => {
    return Math.floor(Number(props.current) / Number(props.total) * 100)
})
</script>

<style lang="scss" scoped>
.container-progress {
    height: 45px;
    width: 100%;
    padding: 0 15px;
    background-color: $color_white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .exam-count {
        display: flex;
        justify-content: center;
        align-items: center;

        .count-current {
            font-size: 16px;
            color: $color_primary;
            font-weight: bold;
        }

        .split {
            color: $color_text_grey;
            margin: 0 5px;
        }

        .count-total {
            font-size: 16px;
            color: $color_text_grey;
            font-weight: normal;
        }
    }

    .progress-box {
        width: 70%;

        &::v-deep .van-progress {
            width: 100%;
        }
    }

    .question {
        border: 1px solid $color_border_grey;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        color: $color_text_grey;
    }
}
</style>